<!-- 案例详情 -->
<template>
  <div class="main-wrapper">
    <el-form ref="dataForm" :model="industryInfoData" label-position="left" label-width="90px">
      <el-form-item label="标题">
        <span>{{ industryInfoData.title }}</span>
      </el-form-item>
      <el-form-item label="作者">
        <span>{{ industryInfoData.fromName }}</span>
      </el-form-item>
      <el-form-item label="类型">
        <span>{{ industryInfoData.categoryName }}</span>
      </el-form-item>
      <el-form-item label="内容">
        <div v-html="industryInfoData.content" />
      </el-form-item>
      <el-form-item label="状态">
        <el-tag :type="industryInfoData.status | styleFilter()">{{ industryInfoData.status | statusFilter() }}</el-tag>
      </el-form-item>
      <el-form-item label="创建时间">
        <span>{{ industryInfoData.createTime | timeFilter('{y}-{m}-{d} {h}:{i}') }}</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <router-link to="/case/list"><el-button>关闭</el-button></router-link>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getIndustryInfo } from '@/api/industryInfo'

export default {
  // import引入的组件需要注入到对象中
  components: {
  },
  filters: {
    styleFilter(style) {
      const styleMap = { 0: '', 1: 'success', 2: 'danger' }
      return styleMap[style]
    },
    timeFilter(time, format) {
      return parseTime(time, format)
    },
    statusFilter(value) {
      const statusMap = { 0: '草稿', 1: '已发布', 2: '废弃' }
      return statusMap[value]
    }
  },
  data() {
    // 存放数据
    return {
      industryInfoData: {}
    }
  },
  // 生命周期 - 创建完成
  created() {
    const id = this.$route.params && this.$route.params.id
    this.fetchIndustryInfoInfo(id)
  },
  // 方法
  methods: {
    fetchIndustryInfoInfo(id) {
      getIndustryInfo(id).then(res => {
        this.industryInfoData = res.data
      })
    }
  }
}
</script>
<style lang='scss' scoped>
// @import url(); // 引入公共css类
.main-wrapper {
  margin: 8px;
}
</style>
